import React from 'react';
import {
  Modal,
  Form,
  Input,
  Select,
  Switch,
  InputNumber,
  Row,
  Col,
  Divider,
  Checkbox
} from 'antd';

const { Option } = Select;

// 字段类型
export const FIELD_TYPES = [
  { value: 'text', label: '文本' },
  { value: 'number', label: '数字' },
  { value: 'select', label: '下拉选择' },
  { value: 'date', label: '日期' },
  { value: 'datetime', label: '日期时间' },
  { value: 'switch', label: '开关' },
  { value: 'textarea', label: '多行文本' },
  { value: 'radio', label: '单选' },
  { value: 'checkbox', label: '多选' },
  { value: 'image', label: '图片' },
  { value: 'file', label: '文件' },
];

interface FieldEditorProps {
  visible: boolean;
  field?: any;
  onSave: (field: any) => void;
  onCancel: () => void;
}

export const FieldEditor: React.FC<FieldEditorProps> = ({
  visible,
  field,
  onSave,
  onCancel
}) => {
  const [form] = Form.useForm();

  React.useEffect(() => {
    if (visible) {
      if (field) {
        form.setFieldsValue({
          ...field,
          ...field.table,
          ...field.search,
          ...field.form,
        });
      } else {
        form.resetFields();
      }
    }
  }, [visible, field, form]);

  const handleOk = async () => {
    const values = await form.validateFields();
    
    const fieldData = {
      key: values.key,
      label: values.label,
      type: values.type,
      table: {
        width: values.width,
        align: values.align,
        fixed: values.fixed,
        hidden: values.hidden,
        sortable: values.sortable,
        ellipsis: values.ellipsis,
      },
      search: {
        searchable: values.searchable,
        searchType: values.searchType,
        quickSearch: values.quickSearch,
      },
      form: {
        creatable: values.creatable,
        editable: values.editable,
        updatable: values.updatable,
        placeholder: values.placeholder,
        required: values.required,
        rules: values.required ? [{ required: true, message: `请输入${values.label}` }] : [],
      },
    };

    onSave(fieldData);
  };

  return (
    <Modal
      title={field ? '编辑字段' : '新增字段'}
      open={visible}
      onOk={handleOk}
      onCancel={onCancel}
      width={700}
    >
      <Form form={form} layout="vertical">
        <Row gutter={16}>
          <Col span={8}>
            <Form.Item
              name="key"
              label="字段名"
              rules={[
                { required: true, message: '请输入字段名' },
                { pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '字段名必须以字母开头' }
              ]}
            >
              <Input placeholder="例如：name" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              name="label"
              label="显示名称"
              rules={[{ required: true, message: '请输入显示名称' }]}
            >
              <Input placeholder="例如：姓名" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              name="type"
              label="字段类型"
              rules={[{ required: true, message: '请选择字段类型' }]}
            >
              <Select placeholder="请选择字段类型">
                {FIELD_TYPES.map(type => (
                  <Option key={type.value} value={type.value}>
                    {type.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Divider>表格配置</Divider>
        
        <Row gutter={16}>
          <Col span={8}>
            <Form.Item name="width" label="列宽度">
              <InputNumber style={{ width: '100%' }} placeholder="自动" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="align" label="对齐方式" initialValue="left">
              <Select>
                <Option value="left">左对齐</Option>
                <Option value="center">居中</Option>
                <Option value="right">右对齐</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="fixed" label="固定列">
              <Select placeholder="不固定" allowClear>
                <Option value="left">固定在左侧</Option>
                <Option value="right">固定在右侧</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={8}>
            <Form.Item name="hidden" valuePropName="checked">
              <Checkbox>隐藏此列</Checkbox>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="sortable" valuePropName="checked">
              <Checkbox>可排序</Checkbox>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="ellipsis" valuePropName="checked">
              <Checkbox>超出省略</Checkbox>
            </Form.Item>
          </Col>
        </Row>

        <Divider>搜索配置</Divider>
        
        <Row gutter={16}>
          <Col span={8}>
            <Form.Item name="searchable" valuePropName="checked">
              <Checkbox>可搜索</Checkbox>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="searchType" label="搜索方式">
              <Select placeholder="精确匹配">
                <Option value="equal">精确匹配</Option>
                <Option value="like">模糊匹配</Option>
                <Option value="range">范围查询</Option>
                <Option value="in">包含查询</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="quickSearch" valuePropName="checked">
              <Checkbox>快速搜索</Checkbox>
            </Form.Item>
          </Col>
        </Row>

        <Divider>表单配置</Divider>
        
        <Row gutter={16}>
          <Col span={8}>
            <Form.Item name="creatable" valuePropName="checked" initialValue={true}>
              <Checkbox>创建时显示</Checkbox>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="editable" valuePropName="checked" initialValue={true}>
              <Checkbox>可编辑</Checkbox>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="updatable" valuePropName="checked" initialValue={true}>
              <Checkbox>更新时显示</Checkbox>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={16}>
            <Form.Item name="placeholder" label="占位符">
              <Input placeholder="请输入占位符文本" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="required" valuePropName="checked">
              <Checkbox>必填字段</Checkbox>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default FieldEditor;
